<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>521zuoyy</title>
    <style>

        .D1 {
            width: 300px;
            margin: 0 ;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 0%;
            top: 0;

        }
        .D2 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 25%;
            top: 0;
        }

        .D3 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 0;
        }
        
        .D4 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 75%;
            top: 0;
        }
        .D5 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 0%;
            top: 30%;
        }
        .D6 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 25%;
            top: 30%;
        }
        .D7 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 30%;
        }
        .D8 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 75%;
            top: 30%;
        }
        .D9 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 0%;
            top: 70%;
        }

        .D10 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 25%;
            top: 70%;
        }

        .D11 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 70%;
        }
        .D12 {
            width: 260px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: absolute;
            left: 75%;
            top: 70%;
        }
            
       
    </style>
</head>
<body>

<!-- D1/ -->
<div class="D1">
<form action="#" method="post" name="search" class="">
<input name="save" />
<button>提交按钮</button>
</form>
</div>

 

<!-- D2 -->
<div class="D2">
    <form action="#" method="post" class="">
    用户名:
    <input class="right" type="text" value="张三" maxlength="6">
    <br><br>
    密码：
    <input type="password" class="right">
</form>
</div>



 

<!-- D3 -->
<div class="D3">
   <h2>多行文本框:</h2>
<textarea name="content" cols="20" rows="10">
    默认文本
</textarea>
 
</div>

 

<!-- D4 -->
<div class="D4">
    性别:
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />

</div>



 

<!-- D5 -->
<!--单选下拉菜单，可设置默认选中项-->
<div class="D5">
    所在城市(单选):<br>
<select>
    <option>-请选择-</option>
    <option selected="selected">北京</option>
    <option>上海</option>
    <option>广州</option>
</select><br><br>
<!--多选下拉菜单，可设置可见选项数，默认选中项可以设置多个-->
兴趣爱好(多选):<br>
<select multiple="multiple" size="4">
    <option>读书</option>
    <option selected="selected">旅行</option>
    <option selected="selected">听音乐</option>
    <option>运列</option>
</select>
</div>


 

<!-- D6 -->

<div class="D6">
    <form action="#" class="">
    <fieldset>
        <legend>学生信息</legend>
        姓名:<input type="text" name="name" />
        班级:<input type="text" name="class"/>
    </fieldset>
</form>
</div>


 
<!-- D7 -->
<div class="D7">
    <input id="address" list="addressList">
<datalist id="addressList">
    <option value="北京"></option>
    <option value="上海"></option>
    <option value="深圳"></option>
</datalist>
</div>



 
<!-- D8 -->
<div class="D8">
    <form oninput="x.value=parseInt(a.value) +parseInt(b.value)">
    <input type="number" id="a" value="50"/>
    +<input type="number" id="b" value="50" />
    =<output name="x">100</output>
</form>
</div>



 
<!-- D9 -->

<div class="D9">
    <form action="#" method="get">
    请输入您的邮箱:
    <input type="email" name="formmail" required /><br><br>
    输入个人网址:
    <input type="url" name="user_url" required /><br><br>
    <input type="submit" value="提交"/>
</form>
</div>



 
<!-- D10 -->
<div class="D10">
   <form action="#" method="post" name="search" autocomplete="on">
    <input name="save"/>
    <button>提交按钮</button>
</form> 
</div>



 
<!-- D11 -->

<div class="D11">
    <form action="#" method="get" novalidate>
    请输入您的邮箱:<input type="email" name="formmail" required/><br><br>
    <input type="submit"/>
</form></div>



 
<!-- D12 -->
<div class="D12">
    <form action="#" method="get">
    <input name="user_name" required placeholder="请输入您的用户名"
    pattern="^[a-zA-Z0-9_-]{6,16}$"/><br><br>
    <input name="user_phone" required placeholder="请输入您的手机号码"
    pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"/><br><br>
    <input type="text" pattern="[1-9]\d{5}(?!\d)$" name="postcode"
    required placeholder="请输入中国邮编"/><br><br>
    <input type="submit" value="提交">
</form>
</div>




</body>
</html>